<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表与详情滚动定位高亮系统</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
      color: #333;
      line-height: 1.6;
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      height: 90vh;
      background: rgba(255, 255, 255, 0.93);
      border-radius: 20px;
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
      overflow: hidden;
    }

    header {
      background: linear-gradient(90deg, #ff416c, #ff4b2b);
      color: white;
      padding: 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .logo i {
      font-size: 32px;
    }

    .logo h1 {
      font-size: 28px;
      font-weight: 700;
    }

    .controls {
      display: flex;
      gap: 20px;
    }

    .search-box {
      display: flex;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 30px;
      padding: 8px 20px;
      align-items: center;
    }

    .search-box input {
      background: transparent;
      border: none;
      color: white;
      font-size: 16px;
      padding: 5px 10px;
      width: 200px;
      outline: none;
    }

    .search-box input::placeholder {
      color: rgba(255, 255, 255, 0.7);
    }

    .main-content {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .list-panel {
      width: 320px;
      background: #f8f9fa;
      border-right: 1px solid #eaeaea;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .panel-header {
      padding: 20px;
      background: #fff;
      border-bottom: 1px solid #eaeaea;
    }

    .panel-header h2 {
      color: #1a2a6c;
      font-size: 22px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .list-container {
      flex: 1;
      overflow-y: auto;
      padding: 10px;
    }

    .list-item {
      padding: 18px 20px;
      margin: 10px 0;
      background: white;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 15px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
      border: 2px solid transparent;
    }

    .list-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-color: #ff4b2b;
    }

    .list-item.active {
      border-color: #ff4b2b;
      background: linear-gradient(to right, rgba(255, 75, 43, 0.1), rgba(255, 75, 43, 0.05));
      position: relative;
    }

    .list-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 4px;
      background: #ff4b2b;
      border-radius: 2px;
    }

    .item-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: white;
      flex-shrink: 0;
    }

    .item-info {
      flex: 1;
    }

    .item-info h3 {
      font-size: 18px;
      margin-bottom: 5px;
      color: #1a2a6c;
    }

    .item-info p {
      font-size: 14px;
      color: #666;
    }

    .detail-panel {
      flex: 1;
      overflow-y: auto;
      padding: 30px 40px;
      background: #fff;
      position: relative;
    }

    .detail-section {
      min-height: 400px;
      padding: 30px;
      margin-bottom: 40px;
      background: white;
      border-radius: 15px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }

    .detail-section.active {
      border-color: #ff4b2b;
      box-shadow: 0 8px 25px rgba(255, 75, 43, 0.2);
    }

    .detail-section h2 {
      font-size: 32px;
      margin-bottom: 20px;
      color: #ff4b2b;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .detail-section h2 i {
      background: linear-gradient(135deg, #ff416c, #ff4b2b);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .detail-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
      margin-top: 20px;
    }

    .detail-card {
      background: #f9f9f9;
      border-radius: 12px;
      padding: 25px;
      transition: all 0.3s ease;
    }

    .detail-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .detail-card h3 {
      font-size: 20px;
      margin-bottom: 15px;
      color: #1a2a6c;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .detail-card h3 i {
      color: #ff4b2b;
    }

    .detail-card p {
      font-size: 16px;
      color: #555;
      line-height: 1.7;
    }

    .info-bar {
      background: rgba(0, 0, 0, 0.85);
      color: white;
      padding: 15px 30px;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
    }

    .info-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .info-item span {
      color: #ff4b2b;
      font-weight: bold;
    }

    .scroll-indicator {
      position: fixed;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 15px;
      z-index: 100;
    }

    .indicator-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }

    .indicator-dot.active {
      background: #ff4b2b;
      transform: scale(1.4);
    }

    .indicator-dot:hover::after {
      content: attr(data-title);
      position: absolute;
      right: 25px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 5px 15px;
      border-radius: 20px;
      white-space: nowrap;
      font-size: 14px;
    }

    @media (max-width: 1000px) {
      .main-content {
        flex-direction: column;
      }

      .list-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eaeaea;
        height: 300px;
      }

      .detail-panel {
        height: calc(100% - 300px);
      }
    }

    @media (max-width: 768px) {
      header {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
      }

      .controls {
        width: 100%;
        justify-content: center;
      }

      .search-box input {
        width: 100%;
      }

      .detail-section {
        padding: 20px;
      }

      .detail-section h2 {
        font-size: 26px;
      }

      .info-bar {
        flex-direction: column;
        gap: 10px;
        align-items: center;
      }

      .scroll-indicator {
        display: none;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <header>
      <div class="logo">
        <i class="fas fa-list-alt"></i>
        <h1>列表与详情交互系统</h1>
      </div>
      <div class="controls">
        <div class="search-box">
          <i class="fas fa-search"></i>
          <input type="text" id="search-input" placeholder="搜索列表项...">
        </div>
        <button class="btn"><i class="fas fa-sync-alt"></i> 重置</button>
      </div>
    </header>

    <div class="main-content">
      <div class="list-panel">
        <div class="panel-header">
          <h2><i class="fas fa-th-list"></i> 项目列表</h2>
        </div>
        <div class="list-container" id="list-container">
          <!-- 列表项将通过JS动态生成 -->
        </div>
      </div>

      <div class="detail-panel" id="detail-panel">
        <!-- 详情区域将通过JS动态生成 -->
      </div>
    </div>

    <div class="info-bar">
      <div class="info-item">
        <i class="fas fa-info-circle"></i>
        当前选中: <span id="current-item">无</span>
      </div>
      <div class="info-item">
        <i class="fas fa-map-marker-alt"></i>
        滚动位置: <span id="scroll-position">0</span>px
      </div>
      <div class="info-item">
        <i class="fas fa-hashtag"></i>
        当前区块: <span id="current-section">无</span>
      </div>
    </div>
  </div>

  <div class="scroll-indicator" id="scroll-indicator">
    <!-- 滚动指示器点将通过JS动态生成 -->
  </div>

  <script>
    // 示例数据
    const items = [
      {
        id: 'project-1',
        icon: 'fas fa-rocket',
        iconColor: '#ff4b2b',
        title: '火星探索计划',
        description: '载人火星探测任务',
        details: {
          title: '火星探索计划详情',
          content: [
            {
              icon: 'fas fa-calendar',
              title: '项目时间线',
              text: '2023-2028年，分三个阶段实施。第一阶段：无人探测器和资源勘察；第二阶段：建立临时基地；第三阶段：载人登陆任务。'
            },
            {
              icon: 'fas fa-users',
              title: '团队组成',
              text: '由国际顶尖航天专家组成，包括50名宇航员、120名工程师和80名科学家。团队来自NASA、ESA和中国国家航天局。'
            },
            {
              icon: 'fas fa-flask',
              title: '科学研究',
              text: '重点研究火星地质结构、大气成分、水源分布及潜在生命迹象。计划采集并分析超过200份土壤和岩石样本。'
            }
          ]
        }
      },
      {
        id: 'project-2',
        icon: 'fas fa-dna',
        iconColor: '#4facfe',
        title: '基因编辑研究',
        description: 'CRISPR技术临床应用',
        details: {
          title: '基因编辑技术突破',
          content: [
            {
              icon: 'fas fa-medal',
              title: '研究成果',
              text: '成功开发新型CRISPR-Cas12b系统，编辑效率提升45%，脱靶率降低至0.1%以下。已在动物模型中成功治愈遗传性血液疾病。'
            },
            {
              icon: 'fas fa-heartbeat',
              title: '临床应用',
              text: '已获批准进行5项临床试验，包括镰状细胞贫血、地中海贫血和遗传性视网膜病变的治疗。预计2025年进入商业化阶段。'
            },
            {
              icon: 'fas fa-shield-alt',
              title: '安全与伦理',
              text: '建立严格的安全评估体系和伦理审查委员会，确保技术应用符合国际生物伦理标准。所有治疗方案均通过三级安全审查。'
            }
          ]
        }
      },
      {
        id: 'project-3',
        icon: 'fas fa-leaf',
        iconColor: '#84fab0',
        title: '可持续农业',
        description: '垂直农场解决方案',
        details: {
          title: '垂直农场技术',
          content: [
            {
              icon: 'fas fa-chart-line',
              title: '技术优势',
              text: '采用多层水培系统，比传统农业节水95%，单位面积产量提高12倍。使用AI优化光照、营养和生长周期，全年无间断生产。'
            },
            {
              icon: 'fas fa-city',
              title: '城市部署',
              text: '已在15个特大城市部署，包括东京、纽约和上海。单座垂直农场可满足5万居民全年新鲜蔬菜需求，减少食物运输碳排放85%。'
            },
            {
              icon: 'fas fa-seedling',
              title: '作物多样性',
              text: '成功培育120种蔬菜、水果和食用花卉，包括生菜、番茄、草莓和香草。开发耐低光照高营养价值的特种作物。'
            }
          ]
        }
      },
      {
        id: 'project-4',
        icon: 'fas fa-brain',
        iconColor: '#a6c0fe',
        title: '人工智能研究',
        description: '新一代神经网络',
        details: {
          title: '人工智能突破',
          content: [
            {
              icon: 'fas fa-microchip',
              title: '架构创新',
              text: '开发新型Transformer-XL架构，支持128K上下文长度，比现有模型提升16倍。参数量达1.2万亿，推理效率提高40%。'
            },
            {
              icon: 'fas fa-language',
              title: '多语言能力',
              text: '支持87种语言实时互译，准确率98.7%。理解文化背景和方言差异，通过图灵测试的跨语言版本。'
            },
            {
              icon: 'fas fa-robot',
              title: '应用场景',
              text: '应用于医疗诊断、科学研究和教育领域。在癌症早期诊断中达到96%准确率，协助科学家完成3项重大发现。'
            }
          ]
        }
      },
      {
        id: 'project-5',
        icon: 'fas fa-wind',
        iconColor: '#d4fc79',
        title: '清洁能源计划',
        description: '海上风力发电',
        details: {
          title: '海上风电工程',
          content: [
            {
              icon: 'fas fa-turbine',
              title: '技术规格',
              text: '部署世界最大20MW风力涡轮机，转子直径260米，单台机组年发电量80GWh。采用浮动平台技术，适用于深海区域。'
            },
            {
              icon: 'fas fa-bolt',
              title: '发电能力',
              text: '北海风电场集群总装机容量5.2GW，年发电量21TWh，满足600万户家庭用电需求。碳减排相当于种植1.2亿棵树。'
            },
            {
              icon: 'fas fa-fish',
              title: '生态保护',
              text: '采用环保设计，减少对海洋生物影响。建立人工鱼礁促进生态恢复，项目海域生物多样性提升35%。'
            }
          ]
        }
      }
    ];

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function () {
      const listContainer = document.getElementById('list-container');
      const detailPanel = document.getElementById('detail-panel');
      const scrollIndicator = document.getElementById('scroll-indicator');
      const currentItemSpan = document.getElementById('current-item');
      const scrollPositionSpan = document.getElementById('scroll-position');
      const currentSectionSpan = document.getElementById('current-section');
      const searchInput = document.getElementById('search-input');

      // 生成列表项
      items.forEach(item => {
        const listItem = document.createElement('div');
        listItem.className = 'list-item';
        listItem.dataset.target = item.id;

        listItem.innerHTML = `
                    <div class="item-icon" style="background: ${item.iconColor}">
                        <i class="${item.icon}"></i>
                    </div>
                    <div class="item-info">
                        <h3>${item.title}</h3>
                        <p>${item.description}</p>
                    </div>
                `;

        listContainer.appendChild(listItem);

        // 生成详情区块
        const detailSection = document.createElement('div');
        detailSection.className = 'detail-section';
        detailSection.id = item.id;

        let contentHTML = '';
        item.details.content.forEach(content => {
          contentHTML += `
                        <div class="detail-card">
                            <h3><i class="${content.icon}"></i> ${content.title}</h3>
                            <p>${content.text}</p>
                        </div>
                    `;
        });

        detailSection.innerHTML = `
                    <h2><i class="${item.icon}"></i> ${item.details.title}</h2>
                    <div class="detail-content">
                        ${contentHTML}
                    </div>
                `;

        detailPanel.appendChild(detailSection);

        // 生成滚动指示点
        const indicatorDot = document.createElement('div');
        indicatorDot.className = 'indicator-dot';
        indicatorDot.dataset.target = item.id;
        indicatorDot.dataset.title = item.title;
        scrollIndicator.appendChild(indicatorDot);
      });

      const listItems = document.querySelectorAll('.list-item');
      const detailSections = document.querySelectorAll('.detail-section');
      const indicatorDots = document.querySelectorAll('.indicator-dot');

      // 点击列表项事件
      listItems.forEach(item => {
        item.addEventListener('click', function () {
          const targetId = this.dataset.target;
          scrollToSection(targetId);
        });
      });

      // 点击指示点事件
      indicatorDots.forEach(dot => {
        dot.addEventListener('click', function () {
          const targetId = this.dataset.target;
          scrollToSection(targetId);
        });
      });

      // 滚动到指定区域
      function scrollToSection(sectionId) {
        const targetSection = document.getElementById(sectionId);
        if (targetSection) {
          // 滚动到目标区域
          detailPanel.scrollTo({
            top: targetSection.offsetTop - 50,
            behavior: 'smooth'
          });

          // 更新列表项高亮
          updateActiveListItem(sectionId);

          // 更新当前选中显示
          const activeItem = items.find(item => item.id === sectionId);
          currentItemSpan.textContent = activeItem.title;
        }
      }

      // 更新激活的列表项
      function updateActiveListItem(activeId) {
        listItems.forEach(item => {
          if (item.dataset.target === activeId) {
            item.classList.add('active');
          } else {
            item.classList.remove('active');
          }
        });

        detailSections.forEach(section => {
          if (section.id === activeId) {
            section.classList.add('active');
          } else {
            section.classList.remove('active');
          }
        });

        indicatorDots.forEach(dot => {
          if (dot.dataset.target === activeId) {
            dot.classList.add('active');
          } else {
            dot.classList.remove('active');
          }
        });
      }

      // 监听详情区域滚动
      let isScrolling = false;
      detailPanel.addEventListener('scroll', function () {
        // 更新滚动位置显示
        scrollPositionSpan.textContent = detailPanel.scrollTop;

        if (!isScrolling) {
          window.requestAnimationFrame(function () {
            const scrollPosition = detailPanel.scrollTop + 100;

            // 找出当前显示的区块
            let currentSectionId = null;
            detailSections.forEach(section => {
              const sectionTop = section.offsetTop;
              const sectionHeight = section.offsetHeight;

              if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                currentSectionId = section.id;
              }
            });

            if (currentSectionId) {
              // 更新激活状态
              updateActiveListItem(currentSectionId);

              // 更新当前区块显示
              const activeItem = items.find(item => item.id === currentSectionId);
              currentSectionSpan.textContent = activeItem.title;
            }

            isScrolling = false;
          });

          isScrolling = true;
        }
      });

      // 搜索功能
      searchInput.addEventListener('input', function () {
        const searchTerm = this.value.toLowerCase();

        listItems.forEach((item, index) => {
          const title = items[index].title.toLowerCase();
          const description = items[index].description.toLowerCase();

          if (title.includes(searchTerm) || description.includes(searchTerm)) {
            item.style.display = 'flex';
          } else {
            item.style.display = 'none';
          }
        });
      });

      // 初始化
      scrollToSection(items[0].id);
    });
  </script>
</body>

</html>